<template>

  <div >
    <div style="height: 150px">
      <n-scrollbar trigger="none">
        <n-space>
          <n-tag size="small" closable @close="handleClose">
            爱在西元前
          </n-tag>
          <n-tag type="success" closable @close="handleClose">
            不该
          </n-tag>
          <n-tag size="medium" type="warning" closable @close="handleClose">
            超人不会飞超人不会飞超人不会飞超人不
          </n-tag>
          <n-tag type="error" closable @close="handleClose">
            手写的从前
          </n-tag>
          <n-tag type="info" closable @click="handleClick" @close="handleClose">
            哪里都是你
          </n-tag>
          <n-tag closable @close="handleClose">
            爱在西元前
          </n-tag>
          <n-tag type="success" closable @close="handleClose">
            不该
          </n-tag>
          <n-tag type="warning" closable @close="handleClose">
            超人不会飞
          </n-tag>
          <n-tag type="error" closable @close="handleClose">
            手写的从前
          </n-tag>
          <n-tag type="info" closable @click="handleClick" @close="handleClose">
            哪里都是你
          </n-tag>
          <n-tag closable @close="handleClose">
            爱在西元前
          </n-tag>
          <n-tag type="success" closable @close="handleClose">
            不该
          </n-tag>
          <n-tag type="warning" closable @close="handleClose">
            超人不会飞
          </n-tag>
          <n-tag type="error" closable @close="handleClose">
            手写的从前
          </n-tag>
        </n-space>
      </n-scrollbar>

    </div>
    <div>
      <n-input-group style="margin-top: 10px;">
        <n-auto-complete />
        <n-button type="primary">
          填入
        </n-button>
      </n-input-group>

    </div>
  </div>







<!--    <n-el >-->
<!--        <n-space justify="center"  >-->
<!--            <n-image-->
<!--                :width="400"-->
<!--                :src=fileFunction.getViewFilePathByUserFileId(row.imgFileId?row.imgFileId:row.imageUrl)-->
<!--            />-->
<!--        </n-space>-->
<!--    </n-el>-->
<!--    <n-space   style="margin-top:20px" >-->
<!--        <n-scrollbar  x-scrollable style="max-height: 80px">-->
<!--            <div style="white-space: nowrap;" >-->
<!--                <n-image v-for="storyPaintLog in row.imageList"-->
<!--                    preview-disabled-->
<!--                    :width="70"-->
<!--                    size="small"-->
<!--                    @click="clickImg(storyPaintLog)"-->
<!--                    :class="{ 'selected': row.imgFileId=== storyPaintLog }"-->
<!--                     style="margin-left: 10px;"-->
<!--                    :src=fileFunction.getViewFilePathByUserFileId(storyPaintLog)-->
<!--                />-->
<!--            </div>-->
<!--        </n-scrollbar>-->
<!--    </n-space>-->
<!--    <n-button block type="primary" style="margin-top: 10px;" @click="rechosePic" :loading = "loading">设为本镜图片</n-button>-->
</template>

<script setup lang="ts">
//@ts-ignore
import fileFunction from '@/libs/globalFunction/file.js'
import {NButton} from "naive-ui";
import {storyController} from '@/api/story/story.api'
import {ref} from "vue";
import {useMessage } from 'naive-ui';


const message = useMessage()
const loading = ref(false)
const props = defineProps({
    row: {
        type: Object,
        default: () => {
            return {}
        }
    },
    selectFunction:{
      type: Function,
      // required: true
      default: (fileId:string) => {

      }
    }
})

const selectImgTaskId = ref(props.row.paintTaskId)

const clickImg = (storyPaintLog:any) => {
    props.row.imgFileId = storyPaintLog
    selectImgTaskId.value = storyPaintLog
}

const rechosePic = () => {
    loading.value = true
    const data = {
        id : props.row.id,
        imageUrl: selectImgTaskId.value
    }
    storyController.updatePic(data).then(res=> {
        loading.value = false
        if (res.code === 200 ) {
            message.success('设置成功')
          props.selectFunction(selectImgTaskId.value)
        } else {
            message.error(res.message)
        }
    })
}
</script>

<style>
</style>
